<template>
  <div class="menu-body">
    <div class="menu-button">
      <el-button size="small" type="success" @click="handleAdd">添加</el-button>
      <el-input size="small" placeholder="请输入菜单名称" v-model="query.name" class="filter"/>
      <el-select size="small" v-model="query.status" placeholder="请选择菜单状态" clearable class="filter">
        <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button size="small" type="success" plain class="search-button" @click="getMenuTree">搜索</el-button>
    </div>
    <el-table
        :data="menuList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"></el-table-column>
      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="path" label="路由路径" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
          >新增
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加或修改的弹框-->
    <el-dialog
        width="500px"
        :title="editDialog.title"
        :visible.sync="editDialog.show">
      <component
          v-if="editDialog.show"
          :is="editDialog.component"
          :editDialogShow.sync="editDialog.show"
          :id="editDialog.id"
          :parentId="editDialog.parentId"
          @getMenuTree="getMenuTree">
      </component>
    </el-dialog>
  </div>
</template>

<script>
import {del, get, put} from '@/plugins/axios'

export default {
  created() {
    this.getMenuTree()
  },
  data() {
    const module = '/menu'
    return {
      // 菜单列表
      menuList: [],
      // 是否默认全部展开
      isExpandAll: false,
      // 搜索菜单状态数组
      status: [
        {label: '停用', value: 0},
        {label: '启用', value: 1}
      ],
      // 查询条件
      query: {},
      // 请求路由
      uri: {
        treeList: module + '/selectMenuTree',
        remove: module + '/remove'
      },
      // 弹出框属性
      editDialog: {
        title: '',
        show: false,
        id: null,
        parentId: null,
        component: () => import('@/views/main/menu/edit')
      },
    }
  },
  methods: {
    getMenuTree() {
      get(this.uri.treeList, this.query, response => {
        if (response.code === 200) {
          this.menuList = response.data
        }
      })
    },
    handleAdd(row) {
      this.editDialog.title = '添加菜单'
      this.editDialog.show = true
      if (row != null && row.id) {
        this.editDialog.parentId = row.id;
      } else {
        this.editDialog.parentId = 0;
      }
      this.editDialog.id = null
    },
    handleUpdate(row) {
      this.editDialog.title = '修改菜单'
      this.editDialog.show = true
      this.editDialog.id = row.id
    },
    handleDelete(row) {
      this.$confirm('此操作将删除该菜单项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(this.uri.remove, {id: row.id}, response => {
          if (response.code === 200) {
            this.getMenuTree()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    }
  }
}
</script>

<style scoped lang="less">
.menu-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;

  .menu-button {
    margin: 5px 0 5px 5px;

    .filter {
      width: auto;
      margin-left: 10px;
    }

    .search-button {
      margin-left: 10px;
    }
  }
}
</style>